<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findClicked" />
    <div class="flex mt10" style="width: 100%; background-color: white">
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
        <h1 class="f16">型体资料</h1>
        <Table
          :tableHeader="tableHeader"
          :tableData="tableData"
          selection
          class="mt10"
          :isLoading="isLoading"
          @currentRow="currentRow"
          @selectList="selectTableList"
        />
        <PageModule
          :PageData="{ total, pageSizeShow: true, buttonS: true }"
          :layout="'prev, pager'"
          @pageSizeChange="handleSizeChange"
          @pageChange="handleCurrentChange"
        />
      </el-card>
      <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }" style="flex: 1">
        <div class="flex AIC">
          <h1 class="f16">型体生产工艺</h1>
          <div class="ml20">
            <el-checkbox v-model="checkbox" label="" @change="checkboxChange" />
          </div>
          <span class="ml10" style="color: red">有设定生产工艺的部位</span>
        </div>
        <Table :tableHeader="tableHeader2" :tableData="tableData2" class="mt10" :isLoading="isLoading2" />
      </el-card>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
import service from '@/utils/request'
import { debounce } from 'lodash'
import { onMounted, watch } from 'vue'
import LoginWork from '@/utils/LoginWork'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'TypeTypeExamination'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref } from 'vue'
const checkbox = ref(false)
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '置空',
    bgColor: '#1890FF'
  },
  {
    type: 'button',
    checkboxLabel: '检核'
  },
  {
    type: 'button',
    checkboxLabel: '取消检核'
  }
])

// 表一模块
const selectedLists = ref([])
const selectTableList = (selectedList: any) => {
  selectedLists.value = selectedList
}
const findClicked = async (content: string) => {
  if (content === '置空') {
    formList.value.forEach((item: any) => {
      item.inputValue = ''
      item.selectValue = ''
      item.dateValue = ''
    })
  }
  if (content === '检核') {
    if (selectedLists.value.length === 0) {
      JMessage.error('请勾选型体')
      return
    }
    const res = await LoginWork.post<any, any>(`/sdStyle/checkProcessRecord?check=${1}`, selectedLists.value)
    if (res.code === 200) {
      JMessage.success('检核成功')
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
  if (content === '取消检核') {
    if (selectedLists.value.length === 0) {
      JMessage.error('请勾选型体')
      return
    }
    const res = await LoginWork.post<any, any>(`/sdStyle/checkProcessRecord?check=${2}`, selectedLists.value)
    if (res.code === 200) {
      JMessage.success('取消检核成功')
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
}
const tableData = ref([])
const imgList = ref([])
const isLoading = ref(true)

// 分页器
const currentPage = ref(1)
const pageSize = ref(40)
const total = ref(0)
const handleSizeChange = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  getTableList()
}
// 获取表数据
const getTableList = debounce(async () => {
  isLoading.value = true
  let tableDataList = await service.post<any, any>(`/sdStyle/getUnProcessStyle?choose=${3}`, {
    color: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入颜色'
    )?.inputValue,
    colorCode: '',
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    style: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入型体'
    )?.inputValue
  })
  isLoading.value = false
  imgList.value = tableDataList.list.map((item: any) => {
    return item.photoPath
  })
  tableData.value = tableDataList.list.map((item: any) => {
    item.backgroundColor = item.cfmFlag
    return item
  })
  total.value = tableDataList.total
  currentRow()
}, 500)
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
const tableHeader = ref([
  {
    backgroundColor: true,
    label: '型体',
    prop: 'style'
  },
  {
    backgroundColor: true,
    label: '颜色',
    prop: 'color'
  },
  {
    label: '颜色代码',
    prop: 'colorCode'
  },
  {
    label: '图片',
    fixed: true,
    type: 'img',
    prop: 'photoPath',
    srcList: imgList
  }
])
// 点击表给另一张表传数据
const currentTableRow = ref({}) as any
const currentRow = async (row: any = tableData.value[0] ? tableData.value[0] : {}) => {
  currentTableRow.value = row
  // 给表二传指令号
  getTableList2()
}

// 表二模块
const tableHeader2 = ref([
  {
    width: 50,
    label: '序号',
    prop: 'seqNo'
  },
  {
    width: 100,
    label: '部位名称',
    prop: 'partName'
  },
  {
    width: 200,
    label: '材料名称',
    prop: 'mtlName'
  },
  {
    label: '材料单位',
    prop: 'mtlUnit'
  },
  {
    width: 50,
    label: '裁层',
    prop: 'cutLayer'
  },
  {
    width: 50,
    label: '每双片数',
    prop: 'cutNum'
  },
  {
    width: 50,
    label: '每刀片数',
    prop: 'cutNum2'
  },
  {
    backgroundColor: true,
    label: '裁次',
    prop: 'cutSeq'
  },
  {
    width: 100,
    label: '入库部门',
    prop: 'stkFlag'
  },
  {
    label: '工艺1',
    prop: 'process1'
  },
  {
    label: '工艺2',
    prop: 'process2'
  },
  {
    label: '工艺3',
    prop: 'process3'
  },
  {
    label: '工艺4',
    prop: 'process4'
  },
  {
    label: '工艺5',
    prop: 'process5'
  },
  {
    label: '工艺6',
    prop: 'process6'
  },
  {
    label: '工艺7',
    prop: 'process7'
  },
  {
    label: '工艺8',
    prop: 'process8'
  },
  {
    label: '工艺9',
    prop: 'process9'
  },
  {
    label: '工艺10',
    prop: 'process10'
  },
  {
    label: '备注',
    prop: 'remark'
  }
])

const tableData2 = ref([])
const isLoading2 = ref(true)
// 分页器
const currentPage2 = ref(1)
const pageSize2 = ref(40)
const total2 = ref(0)
const handleSizeChange2 = (val: number) => {
  pageSize2.value = val
  getTableList2()
}
const handleCurrentChange2 = (val: number) => {
  currentPage2.value = val
  getTableList2()
}
// 获取表数据
const getTableList2 = debounce(async () => {
  isLoading2.value = true
  let tableDataList = await LoginWork.post<any, any>('/sdStyle/getStyleProductionList', {
    color: currentTableRow.value.color,
    colorCode: currentTableRow.value.colorCode || '',
    style: currentTableRow.value.style,
    pageNum: currentPage2.value,
    pageSize: pageSize2.value
  })
  isLoading2.value = false
  tableData2.value = tableDataList.data.map((item: any) => {
    if (item.cutSeq === '一裁') item.backgroundColor = '#FF8080'
    if (item.cutSeq === '二裁') item.backgroundColor = '#80E0E0'
    if (item.cutSeq === '三裁') item.backgroundColor = '#FFE000'
    if (item.cutSeq === '四裁') item.backgroundColor = '#EAEFF5'

    // 多语言
    if (item.partName) {
      item.partName1 = item.partName.key
      item.partName = item.partName.value
    }
    if (item.process1) {
      item.process01 = item.process1.key
      item.process1 = item.process1.value
    }
    if (item.process2) {
      item.process02 = item.process2.key
      item.process2 = item.process2.value
    }
    if (item.process3) {
      item.process03 = item.process3.key
      item.process3 = item.process3.value
    }
    if (item.process4) {
      item.process04 = item.process4.key
      item.process4 = item.process4.value
    }
    if (item.process5) {
      item.process05 = item.process5.key
      item.process5 = item.process5.value
    }
    if (item.process6) {
      item.process06 = item.process6.key
      item.process6 = item.process6.value
    }
    if (item.process7) {
      item.process07 = item.process7.key
      item.process7 = item.process7.value
    }
    if (item.process8) {
      item.process08 = item.process8.key
      item.process8 = item.process8.value
    }
    if (item.process9) {
      item.process09 = item.process9.key
      item.process9 = item.process9.value
    }
    if (item.process10) {
      item.process010 = item.process10.key
      item.process10 = item.process10.value
    }
    return item
  })
  // currentRow2()
}, 500)
// 有设定生产工艺的部位
const checkboxChange = async (val: any) => {
  checkbox.value = val
  if (val === true) {
    isLoading2.value = true
    let tableDataList = await LoginWork.post<any, any>(`/sdStyle/getStyleProductionList?flag=${1}`, {
      color: currentTableRow.value.color,
      colorCode: currentTableRow.value.colorCode || '',
      style: currentTableRow.value.style,
      pageNum: currentPage2.value,
      pageSize: pageSize2.value
    })
    isLoading2.value = false
    tableData2.value = tableDataList.data.map((item: any) => {
      if (item.cutSeq === '一裁') item.backgroundColor = '#FF8080'
      if (item.cutSeq === '二裁') item.backgroundColor = '#80E0E0'
      if (item.cutSeq === '三裁') item.backgroundColor = '#FFE000'
      if (item.cutSeq === '四裁') item.backgroundColor = '#EAEFF5'
      return item
    })
    isLoading2.value = false
  } else {
    getTableList2()
  }
}
</script>

<style lang="less" scoped></style>
